<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>立即购买</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="format-detection" content="telephone=no">
<link href="__STATIC__/hotel/css/public.css" rel="stylesheet">
<link href="__STATIC__/hotel/css/style.css" rel="stylesheet">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<div id="buy">
    <!-- 订房是所需要的信息 -->
    <input type='hidden' id='roomid' value='{$info.id}'>
    <input type='hidden' id='starttime' value='{$starttime}'>
    <input type='hidden' id='endtime' value='{$endtime}'>
    <input type='hidden' id='openid' value='{$openid}'>
    <!-- 顶部 -->
    <!-- <div class="top">
	    <div class="header">
	        <a href="javascript:history.go(-1)" class="lf">
	            <img src="__STATIC__/hotel/images/left.png" alt="">
	            <span>返回</span>
	        </a>
	        <span>预订</span>
	        <a href="javascript:void(0)" class="rt">
	            <img src="__STATIC__/hotel/images/dot.png" alt="">
	        </a>
	    </div>
	    <div class="header subhead">
	    	<a href="javascript:history.go(-1)" class="lf">
	            <img src="__STATIC__/hotel/images/left.png" alt="" style="width: 24%;">
	            <span style="opacity: 0;">返回</span>
	        </a>
	        <span>{$info.name}</span>
	        <a href="javascript:void(0)" class="rt">
	            <img src="__STATIC__/hotel/images/order.png" alt="">
	        </a>
	    </div>
    </div> -->
    <!-- 中间内容 -->
    <div class="section">
    	<div class="room_pic">
    		<img src="__STATIC__/hotel/images/middle.png" alt="" style="display:block;">
    	</div>
    	<div class="room_name">
    		<p>{$info.name} - {$type}</p>
    	</div>
    	<div class="room_price">
    		<span>￥<i class="totalPrice">{$pprice}</i></span>
    		<div class="room_number rt">
                <i>间</i>
    			<span class="plus">+</span>
    			<input class="print" type="text" value="1">
    			<span class="minus">-</span>
    		</div>
    	</div>
    	<div class="live_time">
    		<span>{$starttime}</span> 入住—<span>{$endtime}</span> 离店
    	</div>
    	<div class="info">
    		<ul>
    			<li>预订人</li>
    			<li>
    				<input type="text" id='name' placeholder="请输入姓名">
    			</li>
    			<li id='sex'>
    				<label for="sex-man" class="radio_label checked">
						<input type="radio" value="1" checked="checked" id="sex-man" name="sex" />
						先生
					</label>
					<label for="sex-female" class="radio_label">
						<input type="radio" value="2" id="sex-female" name="sex" />
						女士
					</label>
    			</li>
    		</ul>
    		<ul>
    			<li>手机号</li>
    			<li>
    				<input type="text" id='mobile' placeholder="请输入手机号">
    			</li>
    		</ul>
    		<ul>
    			<li>备注</li>
    			<li style="width: 83%;">
    				<input style="width: 90%;" id='beizhu' type="text" placeholder="请输入备注内容">
    			</li>
    		</ul>
    	</div>
    	<div class="payment">
    		<a href="#">请选择支付方式</a>
    	</div>
    	<div class="boxs">
    		<div class="titles">
    			<a href="#equip" class="active">房间配套</a>
    			<a href="#know">入住须知</a>
    			<a href="#intro">客房介绍</a>
    		</div>
    		<div>
    			<div id="equip">
    				<ul>
    					<li>楼层</li>
    					<li>{$info.floor}</li>
    				</ul>
    				<ul>
    					<li>配备</li>
    					<li>{$info.peibei}</li>
    				</ul>
    				<ul>
    					<li>早餐</li>
    					<li>{$type}</li>
    				</ul>
    				<ul>
    					<li>宽带</li>
    					<li>{$info.kuandai}</li>
    				</ul>
    				<ul>
    					<li>面积</li>
    					<li>{$info.mianji}</li>
    				</ul>
    				<ul>
    					<li>床型</li>
    					<li>{$info.bed}</li>
    				</ul>
    			</div>
    			<div id="know">
    				<p>酒店入住须知：</p>
    				<p>{$info.userknow}</p>
    				<ul>
    					<li>入住和离店</li>
    					<li>入店时间：14:00以后</li>
    				</ul>
    				<ul>
    					<li style="opacity: 0;">入住和离店</li>
    					<li>离店时间：12:00以后</li>
    				</ul>
    				<ul>
    					<li>儿童政策</li>
    					<li>不接受18岁以下客人单独入住</li>
    				</ul>
    				<ul>
    					<li>膳食安排</li>
    					<li>自助早餐 RMB 128元</li>
    				</ul>
    				<ul>
    					<li>宠物</li>
    					<li>不可携带宠物</li>
    				</ul>
    			</div>
    			<div id="intro">
    				<p>{$info.detail}</p>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- 底部 -->
    <div class="footer">
    	<ul>
    		<li class="lf">订单总额：</li>
    		<li class="lf totalPrice1">￥<span class="totalPrice">{$pprice}</span></li>
    		<li class="rt"><a onclick='checkInfo(this);'>立即购买</a></li>
    		<li class="rt"><a href="javascript:void(0)" class="pop">明细&gt;</a></li>
    	</ul>
    </div>
</div>
<!-- 明细 -->
<div class="particular flow">
	<div>
		<div class="header">
	        <a href="#" class="lf">
	            <img src="__STATIC__/hotel/images/left.png" alt="">
	            <span>返回</span>
	        </a>
	        <span>预订</span>
	        <a href="javascript:void(0)" class="rt">
	            <img src="__STATIC__/hotel/images/dot.png" alt="">
	        </a>
	    </div>
	    <p>费用明细<a href="javascript:void(0)" class="rt pop">返回&gt;</a></p>
	    <div class="lists">
	    	<ul class="list">
	    		<li class="lf"><?php echo date('Y.m.d',time());?></li>
	    		<li class="rt">￥{$pprice} <span>x<i class="number">1</i></span></li>
	    	</ul>
	    </div>
	    <div class="total">订单总额 ￥<span class="totalPrice">{$pprice}</span></div>
	</div>
</div>
</body>
<script src="__STATIC__/hotel/js/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('#buy').css('height',$(window).height());
        // 防止键盘被覆盖
        $('input').click(function(){
            var target = this;
            setTimeout(function(){
              target.scrollIntoViewIfNeeded();
              console.log('scrollIntoViewIfNeeded');
            },400);
        });

        // 单选按钮
        $("input[type='radio']").click(function(){
			$("input[type='radio'][name='"+$(this).attr('name')+"']").attr('checked','false').parent().removeClass("checked");
			$(this).attr('checked','true').parent().addClass("checked");
		});

		// 切换
		$('.titles a').click(function(event) {
			event.preventDefault();
			$(this).addClass('active').siblings('a').removeClass('active');
			var id=$(this).attr('href');
			$(id).css('display','block').siblings('div').css('display','none');
		});

		// 动态获取section的高
		var height=$(window).height()-$('.top').outerHeight(true)-$('.footer').outerHeight(true);
	    $('.section').css('height',height);

		// 明细弹框
		$('.pop').click(function(event) {
			$('.particular').toggle();
		});

        //订单单价
        var unitPrice=$('.totalPrice').html();
        //房间数量增加
        $('.plus').click(function(event) {
            var val=$(this).siblings('input').val();
            val++;
            $('.print').attr('value',val);
            $('.print').val(val);
            // 订单总额
            $('.totalPrice').html(parseFloat(unitPrice*val).toFixed(2));

            // 明细
            $('.number').html($('.print').val());
        });
        //房间数量减少
        $('.minus').click(function(event) {
            var val=$(this).siblings('input').val();
            val--;
            if(val<0){
                val=0;
            }
            $('.print').attr('value',val);
            $('.print').val(val);
            // 订单总额
            $('.totalPrice').html(parseFloat(unitPrice*val).toFixed(2));
            // 明细
            $('.number').html($('.print').val());
        });
        // input框内容改变
        $('.print').change(function(event) {
            var printCont=$(this).val();
            $('.print').attr('value',printCont);
            $('.print').val(printCont);
            // 订单总额
            $('.totalPrice').html(parseFloat(unitPrice*printCont).toFixed(2));
            // 明细
            $('.number').html($('.print').val());
        });
	});
</script>
</html>
<script type="text/javascript">
function checkInfo(obj){
    var name = $('#name').val();
    if(name == ''){
        alert('请输入姓名');return false;
    }
    var sex = $("input[type=radio]:checked").attr('value');
    
    var mobile = $('#mobile').val();
    if(mobile == ''){
        alert('请输入手机号码');return false;
    }
    if(!(/^1[3|4|5|7|8]\d{9}$/.test(mobile))){ 
            alert("手机号码格式有误，请重填");  
            return false; 
        }
    var beizhu = $('#beizhu').val();
    var roomid = $('#roomid').val();
    var starttime = $('#starttime').val();
    var endtime = $('#endtime').val();
    var num = $('.print').val();
    //获取总价
    var totalPrice1=$(obj).parent().siblings('.totalPrice1').find('.totalPrice').html();
    if(num <= 0){
        alert('请选择房间数');return false;
    }
    var type = 'orderRoom';
    $.ajax({
        url : "http://game.guangjixinxi.com/JinLingHotel/Mobile/Room/getMoney",
        type : 'GET',
        dataType : 'json',
        data: {type:type,name:name,sex:sex,mobile:mobile,beizhu:beizhu,roomid:roomid,totalPrice1:totalPrice1,starttime:starttime,endtime:endtime,num:num},
        success : function(res){

            if(res.val == 1){
                alert(res.msg);return false;
            }
            if(res.val == 2){
                alert(res.msg);return false;
            }
            if(res.val == 4){
                alert(res.msg);return false;
            }
            if(res.val == 3){
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: '{$sign.appId}', // 必填，公众号的唯一标识
                    timestamp: {$sign.timestamp},
                    nonceStr:'{$sign.nonceStr}',
                    signature:'{$sign.signature}',
                    jsApiList:[
                        'checkJsApi',
                        'closeWindow',
                        'scanQRCode',
                        'chooseWXPay',
                    ]
                });
                 wx.ready(function(){
                       wx.chooseWXPay({
                           timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                           nonceStr: res.paySign.nonceStr, // 支付签名随机串，不长于 32 位
                           package: res.paySign.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                           signType: res.paySign.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                           paySign: res.paySign.paySign, // 支付签名
                           success: function (res) {
                               // 支付成功后的回调函数
                               var openid = $('#openid').val();
                               var num = $('.print').val();
                               $.ajax({
                                url:"http://game.guangjixinxi.com/JinLingHotel/Mobile/Room/changeRoomStatus",
                                data:{openid:openid,num:num},
                                dataType:'json',
                                type:'GET',
                                success:function(res){
                                    if(res.val == 1){
                                      // alert(res.msg);
                                      location.href="{:U('My/roomOrder')}";
                                    }else{
                                      alert('未知错误');return false;
                                    }
                                }
                               })
                               
                               
                           },
                           fail: function (res) {
                               alert('支付失败');return false;
                           },
                           });
                       // });
                         
                     });
            }else{
                alert('获取信息失败,请重新尝试');return false;
            }
        }
    })
}
</script>